<template>
  <div class="draw-tool">
    <div class="title-top">
      <div class="left">
        <i class="line"></i>
        <p class="text">标绘</p>
      </div>
      <i class="el-icon-close" @click="close"></i>
    </div>
    <div class="draw-warp">
      <div class="draw-item" @click="addInteraction('Point', 1, 0)" :class="addInteraceText == 'Point1'?'drawn':''" >
        <img class="icon-txt" v-if="addInteraceText != 'Point1'" :src="require('../../../../assets/mapView/ic_wenben-u.png')" alt="" srcset="">
        <img class="icon-txt" v-if="addInteraceText == 'Point1'" :src="require('../../../../assets/mapView/ic_wenben-s.png')" alt="" srcset="">
        文 本
      </div>
      <div class="draw-item" @click="addInteraction('Point', '', 1)" :class="addInteraceText == 'Point'?'drawn':''" >
        <img class="icon-txt" v-if="addInteraceText != 'Point'" :src="require('../../../../assets/mapView/ic_dianbiaohui-u.png')" alt="" srcset="">
        <img class="icon-txt" v-if="addInteraceText == 'Point'" :src="require('../../../../assets/mapView/ic_dianbiaohui-s.png')" alt="" srcset="">
        点标绘
      </div>
      <div class="draw-item" @click="addInteraction('LineString', '', 2)" :class="addInteraceText == 'LineString'?'drawn':''" >
        <img class="icon-txt" v-if="addInteraceText != 'LineString'" :src="require('../../../../assets/mapView/ic_xianbiaohui-u.png')" alt="" srcset="">
        <img class="icon-txt" v-if="addInteraceText == 'LineString'" :src="require('../../../../assets/mapView/ic_xianbiaohui-s.png')" alt="" srcset="">
        线标绘
      </div>
      <div class="draw-item" @click="morePlot" :class="addInteraceText == 'Box'?'drawn':''">
          <img class="icon-txt" v-if="addInteraceText != 'Box'" :src="require('../../../../assets/mapView/ic_mianbiaohui-u.png')" alt="">
          <img class="icon-txt" v-if="addInteraceText == 'Box'" :src="require('../../../../assets/mapView/ic_mianbiaohui-s.png')" alt="">
          面标绘
          <div class="square-list"  v-show="isMore">
            <div class="slist" @click="addInteraction('Box')">
              矩形
            </div>
            <div class="slist" @click="addInteraction('Circle')">
              圆形
            </div>
            <div class="slist" @click="addInteraction('Polygon')">
              多边形
            </div>
          </div>
        </div>
    </div>
    <div class="draw-wrap1">
      <div class="draw-title">标绘记录</div>
      <div class="draw-title">标绘时间</div>
      <div class="draw-title">操作</div>
    </div>
    <div class="draw-layer" v-for="(layer,index) in layerData" :key="layer.id">
      <div class="layer-icon" :class="layer.isShow ? '': 'icon-close layer-name2' " @click="setVector(index, layer)">{{layer.typeName}}</div>
      <div class="layer-name" :class="layer.isShow ? '': 'layer-name2' " :title="layer.time">
        {{layer.time}}
      </div>
      <div class="layer-btns">
        <img :src="require('@/assets/mapView/btn_qingkong.png')" class="layer-del" @click="delLayer(index, layer)" />
        <!-- <img :src="require('@/assets/mapView/btn_daochu.png')"   class="layer-del" /> -->
      </div>
    </div>
    <div class="draw-actions">
      <div class="actions-item" @click="clearPlot">
        <img class="actions-img" :src="require('@/assets/mapView/ic_qingkongbiaohui-s.png')" alt="">
        清空标绘
      </div>
    </div>
  </div>
</template>

<script>
import dateUtil from '@/utils/dateUtil'
import * as mapUtils from '../../mapUtils'
import { Bus } from '@/utils/eventBus'
// import { transform } from 'ol/proj'
import WKT from 'ol/format/WKT'
export default {
  props: {
    isShowDrawTool: {
      type: Boolean,
      default: false
    },
    clearTableData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addInteraceText: '',
      isMore: false, // 面标绘
      yactive: null,
      layerData: [],
      PointNum: 0, // 点的标绘记录名
      LineStringNum: 0,
      BoxNum: 0,
      CircleNum: 0,
      PolygonNum: 0,
      vectorObjData: {}
    }
  },
  watch: {
    isShowDrawTool(val) {
      if (!val) {
        this.addInteraceText = ''
      }
    },
    clearTableData() {
      this.layerData = []
    },
    deep: true
  },
  mounted() {
    // 绘制结束
    Bus.$on('closeMore', (evt) => {
      console.log('地图已经绘制上。。。。')
      this.layerData.push(this.vectorObjData)
      const geoType = evt.feature.getGeometry().getType()
      // 圆形
      if (geoType === 'Circle') {
        const polygon = evt.feature.getGeometry()
        const center = polygon.getCenter()
        var metersPerUnit = mapUtils.getMap().getView().getProjection().getMetersPerUnit()
        const radius = polygon.getRadius() * metersPerUnit / 1000
        console.log('当前圆的中心点为：' + center, '当前圆的半径为：' + radius + '千米', '圆形---------------')
        // const radius = evt.feature.getGeometry().getRadius() * (mapUtils.getMap().getView().getProjection().getMetersPerUnit())
        // const circle = evt.feature.getGeometry()
        // const centerLogLat = circle.getCenter()
        // const circleCenter = transform(centerLogLat, 'EPSG:3857', 'EPSG:4326')
        // console.log('当前圆的半径为：' + radius + '米')
        // console.log(centerLogLat, '当前圆的中心点为：' + circleCenter)
      } else {
        // 除圆形之外
        const geom = evt.feature.getGeometry()
        var polygonWKT = new WKT().writeGeometry(geom, {
          dataProjection: 'EPSG:4326', // 目标数据
          featureProjection: 'EPSG:4326' // 当前数据
        })
        console.log(polygonWKT, 'WKT')
      }
      this.isMore = false
    })
  },
  methods: {
    close() {
      this.addInteraceText = ''
      this.$emit('closeDrawTool')
    },
    // 面标绘
    morePlot() {
      this.yactive = '3'
      if (this.yactive === '3') {
        this.isMore = true
      } else {
        this.isMore = false
      }
    },
    // 添加标绘
    addInteraction(type, text, active) {
      this.yactive = active
      mapUtils.removeDraw()
      if (this.yactive !== 3) {
        this.isMore = false
      }
      const vectorObj = {
        typeName: '',
        time: '',
        layer: null,
        isShow: true
      }
      if (text) {
        // 文本
        this.$prompt('请输入标注文本', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'promptClass',
          type: 'warning',
          inputValidator: (value) => { // 点击按钮时，对文本框里面的值进行验证
            if (!value) {
              return '输入不能为空'
            }
          }
        }).then(({ value }) => {
          if (type === 'Point' && text) {
            this.addInteraceText = type + text
            vectorObj.typeName = value
            vectorObj.time = dateUtil.formatDateYmdhms(new Date())
            mapUtils.addInteraction('Point1', vectorObj.typeName)
            this.vectorObjData = vectorObj
            // this.layerData.push(vectorObj)
          }
        }).catch(() => {

        })
      } else {
        if (type === 'LineString') {
          this.addInteraceText = type
          this.LineStringNum++
          vectorObj.typeName = '线' + this.LineStringNum
          mapUtils.addInteraction('LineString', vectorObj.typeName)
        } else if (type === 'Point' && !text) {
          this.addInteraceText = type
          this.PointNum++
          vectorObj.typeName = '点' + this.PointNum
          mapUtils.addInteraction('Point', vectorObj.typeName)
        } else if (type === 'Box') {
          this.addInteraceText = 'Box'
          this.BoxNum++
          vectorObj.typeName = '矩形' + this.BoxNum
          mapUtils.addInteraction('Box', vectorObj.typeName)
        } else if (type === 'Circle') {
          this.addInteraceText = 'Box'
          this.CircleNum++
          vectorObj.typeName = '圆形' + this.CircleNum
          mapUtils.addInteraction('Circle', vectorObj.typeName)
        } else if (type === 'Polygon') {
          this.addInteraceText = 'Box'
          this.PolygonNum++
          vectorObj.typeName = '多边形' + this.PolygonNum
          mapUtils.addInteraction('Polygon', vectorObj.typeName)
        }
        vectorObj.time = dateUtil.formatDateYmdhms(new Date())
        this.vectorObjData = vectorObj
        // this.layerData.push(vectorObj)
        this.isMore = false
      }

      // mapUtils.closeMore()
    },
    // 点击标绘记录名动态控制图层显示隐藏
    setVector(index, layer) {
      console.log(index, layer, mapUtils.getMap().getLayers().getArray())
      layer.isShow = !layer.isShow
      const layers = mapUtils.getMap().getLayers().getArray().filter(item => item.values_.name === layer.typeName)
      if (layers.length > 0) {
        layers.forEach(item => {
          item.setVisible(layer.isShow)
        })
      }
    },
    // 清除单行
    delLayer(index, layer) {
      const layers = mapUtils.getMap().getLayers().getArray().filter(item => item.values_.name === layer.typeName)
      this.layerData.forEach((item, iindex) => {
        if (iindex === index) {
          mapUtils.getMap().removeLayer(layers[0])
        }
      })
      this.layerData.splice(index, 1)
    },
    // 清空标绘
    clearPlot() {
      // 清除绘制图层
      const layers = mapUtils.getMap().getLayers().getArray()
      const layer = layers.filter((item, index) => item.values_.layerId.indexOf('draw') !== -1)
      layer.forEach((item) => {
        item.getSource().clear()
      })
      this.layerData = []
    }
  }
}
</script>

<style lang="scss" scoped>
.draw-tool{
  position: absolute;
  top: 77px;
  right: 26px;
  z-index: 1;
  background: linear-gradient(90deg, #031B36 0%, rgba(3,28,51,0.3) 100%);
border-radius: 0px 0px 0px 0px;
opacity: 1;
border: 1px solid;
border-image: linear-gradient(90deg, rgba(0, 48, 76, 1), rgba(0, 48, 76, 1)) 1 1;
  width: 400px;
  .title-top{
    display: flex;
    justify-content: space-between;
    background: #000000 url('@/assets/img/tjtitle.png') no-repeat;
    background-size: 100% 100%;
    width: 400px;
    height: 46px;
    line-height: 46px;
    align-items: center;
    .left{
      height: 100%;
      display: flex;
      align-items: center;

      .text{
       font-size: 14px;
        color: #c3d4fd;
        text-indent: 60px;
        font-size: 20px;
      }
    }
    .el-icon-close{
      margin-right: 5px;
      cursor: pointer;
      color: #fff;
    }
  }
  .draw-warp{
    width: 100%;
    display: flex;
    flex-direction: row;
    margin: 10px 0px 0 0px;
    flex-wrap: nowrap;
    justify-content: space-around;
    .draw-item {
      width: 86px;
      height: 30px;
      line-height: 30px;
      color: #fff;
      position: relative;
      border-radius: 6px;
      font-size: 16px;
      text-align: center;
      background: linear-gradient(180deg, #206CD0 0%, #032D90 100%);
      border: 1px solid #4481FA;
      margin: 0 3px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      img{
        width: 18px;
        height: 18px;
        vertical-align: middle;
      }
    }
    .drawn {
      background: #4481FA;
      color: #fff;
    }
  }
  .draw-wrap1 {
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: rgba(0, 119, 255, 0.1);
    display: flex;
    flex-direction: row;
    /* margin: 24px 0 5px 0; */
    margin: 10px auto;
    flex-wrap: nowrap;
    justify-content: space-between;
    .draw-title {
      width: 33%;
      text-align: center;
      color: #c3d4fd;
    }
  }
  .draw-layer {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    flex-wrap: nowrap;
    justify-content: space-around;
    position: relative;
    color: #fff;
    .layer-icon {
      width: 33%;
      height: 26px;
      line-height: 28px;
      text-indent: 30px;
      text-align: center;
      background: url('@/assets/mapView/gwatch.png') no-repeat left;
      cursor: pointer;
    }
    .icon-close {
      background: url('@/assets/mapView/gclose.png') no-repeat;
    }
    .layer-name {
      display: inline-block;
      width: 33%;
      text-align: center;
      line-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .layer-name2 {
      color: #6D729A;
    }
    .layer-btns {
      display: flex;
      align-items: center;
      width: 33%;
      text-align: center;
      justify-content: center;
      .layer-del {
        line-height: 28px;
        margin-right: 5px;
        display: inline-block;
        color: rgb(173, 57, 57);
        cursor: pointer;
      }
    }

  }
  .draw-actions {
    display: flex;
    flex-direction: row;
    margin: 24px 21px;
    flex-wrap: nowrap;
    justify-content: space-between;
    .actions-item{
      width: 149px;
      height: 36px;
      line-height: 36px;
      background: #4481FA;
      position: relative;
      color: #fff;
      font-family: YouSheBiaoTiHei;
      margin: 0 auto;
      cursor: pointer;
      text-align: center;
      .actions-img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }
    }
  }
}
.square-list {
  position: absolute;
  background: #fff;
  top:30px;
  border: 1px solid #4481FA;
  border-radius: 4px;
  width: 100px;
  font-size: 14px;
  z-index: 1;
  color: #4481FA;
}

</style>
